<form>
  <fieldset>
    <legend>Add to list</legend>
    <div class="row">
      <div class="small-12 columns">
        {% if lists %}
          {% for list in lists %}
          <label for="list-{{ list.pk }}">
              <input class="list" type="checkbox" value="{{ list.pk }}" id="list-{{ list.pk }}" {% if list.title in titles %}checked="checked" {# disabled="disabled" #}{% endif %}/><a href="{% url "list-single-slug" list.pk list.slug%}">
              {{ list.title }} <span>({{ list.links.count }} link{{ list.links.count|pluralize }})</span></a> [<a href="{% url "list-edit" list_pk=list.pk %}">edit</a>]
          </label>
          {% endfor %}
          <p>
            <a href="#" data-reveal-id="create-list"><span class="symbol" style="color: black"><i class="fi-list-thumbnails"></i></span> New List</a>
          </p>
        {% else %}
          <label>You don't have any list.</label>
          <p>
            <a href="#" data-reveal-id="create-list"><span class="symbol" style="color: black"><i class="fi-list-thumbnails"></i></span> Create a list ?</a>
          </p>
        {% endif %}
      </div>
    </div>
  </fieldset>
</form>

<a class="close-reveal-modal">&#215;</a>

<script>
function add_to_own_list(list) {
  list.prop('disabled', true)
  $.ajax({
    type:"POST",
    url:"{% url "ajax-add-to-list-or-create" %}",
    data: 'csrfmiddlewaretoken={{csrf_token}}&lk={{ link_pk }}&ls='+list.val()
  }).always(function(xhr) {
    result = $.parseJSON(xhr.responseText).result;
    if (result == 'added') {
      list.prop('checked', true);
    } else {
      list.prop('checked', false);
    }
    list.prop('disabled', false)
  });
}

$('.list').each(function(index, item) {
  $(item).click(function() {
    add_to_own_list($(item));
  });
});

</script>
</body>
